<template>
  <div class="index-container">
    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">入住老人年龄统计占比</h3>
            <el-date-picker
              v-model="year1"
              type="year"
              :editable="false"
              placeholder="选择年"
              class="fr"
            ></el-date-picker>
          </div>
          <div>
            <vab-chart
              ref="chart1"
              autoresize
              :options="chart1"
              style="width: 100%; height: 360px"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">综合评定结果</h3>
            <el-dropdown class="fr" @command="handleCommand">
              <span class="el-dropdown-link">
                日常生活活动能力
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">
                  日常生活活动能力
                </el-dropdown-item>
                <el-dropdown-item command="b">精神状态</el-dropdown-item>
                <el-dropdown-item command="c">感知与沟通能力</el-dropdown-item>
                <el-dropdown-item command="d">社会参与能力</el-dropdown-item>
                <el-dropdown-item command="e">综合评定</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div>
            <vab-chart
              autoresize
              :options="chart2"
              style="width: 100%; height: 360px"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">疾病统计</h3>
          </div>
          <div>
            <vab-chart
              autoresize
              :options="chart3"
              style="width: 100%; height: 360px"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">听力/视力等级统计</h3>
          </div>

          <div>
            <vab-chart
              autoresize
              :options="chart4"
              style="width: 100%; height: 360px"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">健康评估</h3>
          </div>
          <div>
            <el-table
              ref="tableSort"
              v-loading="listLoading"
              :data="list"
              :element-loading-text="elementLoadingText"
              :header-row-style="{ background: 'rgba(0, 0, 0, 0)' }"
              :header-cell-style="{
                background: 'rgba(0, 0, 0, 0)',
                color: '#fff',
              }"
              header-cell-class-name="tableCell"
              row-class-name="tableRow"
              :highlight-current-row="false"
              class="tableSort"
            >
              <!-- <el-table-column
                show-overflow-tooltip
                type="selection"
                width="55"
              ></el-table-column> -->
              <!-- <el-table-column show-overflow-tooltip label="序号" width="95">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column> -->
              <el-table-column show-overflow-tooltip label="头像">
                <template slot-scope="scope">
                  <el-image
                    v-if="imgShow"
                    :preview-src-list="imageList"
                    :src="scope.row.avatar"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="name"
                label="姓名"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="性别"
                prop="sex"
                align="center"
                :formatter="sexFormatter"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="年龄"
                prop="age"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="日常生活活动能力"
                prop="daily_result"
                width="140"
                align="center"
                :formatter="valueFormat1"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="精神状态"
                prop="spirit_result"
                align="center"
                :formatter="valueFormat2"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="感知与沟通能力"
                prop="feel_result"
                width="140"
                align="center"
                :formatter="valueFormat3"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="社会参与能力"
                prop="s_result"
                align="center"
                :formatter="valueFormat4"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="综合评定"
                prop="test_result"
                align="center"
                :formatter="valueFormat5"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="时间"
                prop="action_time"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import * as echarts from "echarts";
  import VabChart from "@/plugins/echarts";
  import { healthData } from "@/api/caseApi";
  const chartData = [];
  export default {
    name: "Index",
    components: {
      VabChart,
    },
    data() {
      return {
        year1: "",
        imgShow: true,
        listLoading: false,
        elementLoadingText: "加载中...",
        chart1: {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          series: [
            {
              name: "年龄",
              type: "pie",
              radius: "80%",
              center: ["50%", "50%"],
              data: chartData,
              animation: false,
              label: {
                position: "outer",
                alignTo: "none",
                bleedMargin: 5,
              },
            },
          ],
        },
        chart2: {
          grid: {
            top: "15%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          xAxis: {
            data: ["能力完好", "轻度受损", "中度受损", "重度受损"],
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: true, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
            },
          },
          yAxis: [
            {
              type: "value",
              name: "人",
              splitLine: {
                show: false,
              },
              axisTick: {
                show: true,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#fff",
                },
              },
              axisLabel: {
                show: true,
              },
            },
          ],
          series: [
            {
              name: "人",
              type: "bar",
              barWidth: 32,
              color: "#1791FF",
              data: [87, 100, 160, 400],
            },
          ],
        },
        chart3: {
          grid: {
            top: "15%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          xAxis: {
            data: ["高血压", "高血糖", "高血脂", "糖尿病", "冠心病", "其他"],
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: true, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
            },
          },
          yAxis: [
            {
              type: "value",
              name: "人",
              splitLine: {
                show: false,
              },
              axisTick: {
                show: true,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#fff",
                },
              },
              axisLabel: {
                show: true,
              },
            },
          ],
          series: [
            {
              name: "人",
              type: "bar",
              barWidth: 32,
              color: "#4DCC73",
              data: [87, 100, 160, 400, 400, 300],
            },
          ],
        },
        chart4: {
          legend: {
            left: "right",
            top: "top",
            textStyle: {
              color: "#fff",
            },
            data: ["听力", "视力"],
          },
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          xAxis: {
            data: ["正常", "轻度失聪/青光眼", "重度失聪/老花眼"],
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: true, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
            },
          },
          yAxis: [
            {
              type: "value",
              name: "人",
              splitLine: {
                show: false,
              },
              axisTick: {
                show: true,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#fff",
                },
              },
              axisLabel: {
                show: true,
              },
            },
          ],
          series: [
            {
              name: "听力",
              type: "bar",
              barWidth: 32,
              color: "#FCD438",
              stack: "听力",
              data: [],
            },
            {
              name: "视力",
              type: "bar",
              barWidth: 32,
              stack: "视力",
              color: "#1791FF",
              data: [],
            },
          ],
        },
        chart8: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          legend: {
            //图例
            orient: "horizontal", //图例的布局，竖直    horizontal为水平
            x: "center", //图例显示在右边
            itemGap: 32, // 设置间距
            icon: "circle",
            itemWidth: 16,
            itemHeight: 16,
            data: ["自理型", "介助型", "介护型", "特护型"],
            textStyle: {
              //图例文字的样式
              color: "#fff", //文字颜色
              fontSize: 16, //文字大小
            },
          },
          series: [
            {
              name: "占比",
              type: "pie", //环形图的type和饼图相同
              radius: ["55%", "85%"], //饼图的半径，第一个为内半径，第二个为外半径
              center: ["50%", "55%"],
              avoidLabelOverlap: false,
              color: ["#1791FF", "#FF8183", "#4DCC73", "#FCD438"],
              label: {
                normal: {
                  //正常的样式
                  position: "inner",
                  show: true,
                  formatter: "{b} \n {c} ({d}%)",
                },
                emphasis: {
                  // 选中时候的样式
                  show: true,
                  textStyle: {
                    fontSize: "16",
                    fontWeight: "bold",
                  },
                },
              }, //提示文字
              labelLine: {
                normal: {
                  show: true,
                },
              },
              data: [
                {
                  value: 335,
                  name: "自理型",
                },
                {
                  value: 310,
                  name: "介助型",
                },
                {
                  value: 234,
                  name: "介护型",
                },
                {
                  value: 135,
                  name: "特护型",
                },
              ],
            },
          ],
        },
        chart7: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
              },
            },
          },
          legend: {
            //图例
            orient: "vertical", //图例的布局 vertical，竖直    horizontal为水平
            x: "left", //图例显示在右边
            itemGap: 32, // 设置间距
            icon: "circle",
            itemWidth: 16,
            itemHeight: 16,
            data: [
              "肢体康复",
              "行为康复",
              "语言康复",
              "记忆康复",
              "血栓后遗症康复",
            ],
            textStyle: {
              //图例文字的样式
              color: "#fff", //文字颜色
              fontSize: 16, //文字大小
            },
          },
          series: [
            {
              name: "Line 5",
              type: "pie",
              clockWise: true,
              hoverAnimation: false,
              radius: ["80%", "90%"],
              center: ["60%", "50%"],
              color: "#EA82F1",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              data: [
                {
                  value: 7645434,
                  name: "肢体康复",
                },
                {
                  value: 3612343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
            {
              name: "Line 4",
              type: "pie",
              clockWise: true,
              hoverAnimation: false,
              radius: ["65%", "75%"],
              center: ["60%", "50%"],
              color: "#FF787F",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              data: [
                {
                  value: 7645434,
                  name: "行为康复",
                },
                {
                  value: 3612343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
            {
              name: "Line 3",
              type: "pie",
              clockWise: true,
              radius: ["50%", "60%"],
              center: ["60%", "50%"],
              color: "#FFAE67",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              hoverAnimation: false,

              data: [
                {
                  value: 2632321,
                  name: "语言康复",
                },
                {
                  value: 2212343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
            {
              name: "Line 2",
              type: "pie",
              clockWise: true,
              hoverAnimation: false,
              radius: ["35%", "45%"],
              center: ["60%", "50%"],
              color: "#FCD438",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              data: [
                {
                  value: 1823323,
                  name: "记忆康复",
                },
                {
                  value: 1812343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
            {
              name: "Line 1",
              type: "pie",
              clockWise: true,
              color: "#B1B1B1",
              radius: ["20%", "30%"],
              center: ["60%", "50%"],
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              hoverAnimation: false,

              data: [
                {
                  value: 1342221,
                  name: "血栓后遗症康复",
                },
                {
                  value: 1912343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
          ],
        },
        chart5: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
              },
            },
          },
          legend: {
            //图例
            orient: "vertical", //图例的布局 vertical，竖直    horizontal为水平
            x: "left", //图例显示在右边
            itemGap: 32, // 设置间距
            icon: "circle",
            itemWidth: 16,
            itemHeight: 16,
            data: ["临终关怀", "死亡恐惧", "精神慰藉"],
            textStyle: {
              //图例文字的样式
              color: "#fff", //文字颜色
              fontSize: 16, //文字大小
            },
          },
          series: [
            {
              name: "Line 5",
              type: "pie",
              clockWise: true,
              hoverAnimation: false,
              radius: ["80%", "90%"],
              center: ["60%", "50%"],
              color: "#EA82F1",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              data: [
                {
                  value: 7645434,
                  name: "临终关怀",
                },
                {
                  value: 3612343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
            {
              name: "Line 4",
              type: "pie",
              clockWise: true,
              hoverAnimation: false,
              radius: ["65%", "75%"],
              center: ["60%", "50%"],
              color: "#FF787F",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              data: [
                {
                  value: 7645434,
                  name: "死亡恐惧",
                },
                {
                  value: 3612343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
            {
              name: "Line 1",
              type: "pie",
              clockWise: true,
              color: "#B1B1B1",
              radius: ["50%", "60%"],
              center: ["60%", "50%"],
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              hoverAnimation: false,

              data: [
                {
                  value: 1342221,
                  name: "精神慰藉",
                },
                {
                  value: 1912343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
          ],
        },
        chart6: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
              },
            },
          },
          legend: {
            //图例
            orient: "vertical", //图例的布局 vertical，竖直    horizontal为水平
            x: "left", //图例显示在右边
            itemGap: 32, // 设置间距
            icon: "circle",
            itemWidth: 16,
            itemHeight: 16,
            data: ["感情辅导", "心理咨询", "亲人牵挂", "故乡情结"],
            textStyle: {
              //图例文字的样式
              color: "#fff", //文字颜色
              fontSize: 16, //文字大小
            },
          },
          series: [
            {
              name: "Line 4",
              type: "pie",
              clockWise: true,
              hoverAnimation: false,
              radius: ["80%", "90%"],
              center: ["60%", "50%"],
              color: "#1791FF",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              data: [
                {
                  value: 7645434,
                  name: "感情辅导",
                },
                {
                  value: 3612343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
            {
              name: "Line 3",
              type: "pie",
              clockWise: true,
              radius: ["65%", "75%"],
              center: ["60%", "50%"],
              color: "#FF787F",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              hoverAnimation: false,

              data: [
                {
                  value: 2632321,
                  name: "心理咨询",
                },
                {
                  value: 2212343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
            {
              name: "Line 2",
              type: "pie",
              clockWise: true,
              hoverAnimation: false,
              radius: ["50%", "60%"],
              center: ["60%", "50%"],
              color: "#4DCC73",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              data: [
                {
                  value: 1823323,
                  name: "亲人牵挂",
                },
                {
                  value: 1812343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
            {
              name: "Line 1",
              type: "pie",
              clockWise: true,
              color: "#FCD438",
              radius: ["35%", "45%"],
              center: ["60%", "50%"],
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  // shadowBlur: 15,
                  // shadowColor: 'white',
                },
              },
              hoverAnimation: false,

              data: [
                {
                  value: 1342221,
                  name: "故乡情结",
                },
                {
                  value: 1912343,
                  name: "总数",
                  tooltip: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                    emphasis: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
          ],
        },
        list: [],
        imageList: [],
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getTableData();
    },
    methods: {
      sexFormatter(row) {
        if (row.sex == 1) {
          return "男";
        } else {
          return "女";
        }
      },
      valueFormat1(row) {
        let value = row.daily_result;
        if (value == 0) {
          return "能力完好";
        } else if (value == 1) {
          return "轻度受损";
        } else if (value == 2) {
          return "中度受损";
        } else if (value >= 3) {
          return "重度受损";
        }
      },
      valueFormat2(row) {
        let value = row.spirit_result;
        if (value == 0) {
          return "能力完好";
        } else if (value == 1) {
          return "轻度受损";
        } else if (value == 2) {
          return "中度受损";
        } else if (value >= 3) {
          return "重度受损";
        }
      },
      valueFormat3(row) {
        let value = row.feel_result;
        if (value == 0) {
          return "能力完好";
        } else if (value == 1) {
          return "轻度受损";
        } else if (value == 2) {
          return "中度受损";
        } else if (value >= 3) {
          return "重度受损";
        }
      },
      valueFormat4(row) {
        let value = row.s_result;
        if (value == 0) {
          return "能力完好";
        } else if (value == 1) {
          return "轻度受损";
        } else if (value == 2) {
          return "中度受损";
        } else if (value >= 3) {
          return "重度受损";
        }
      },
      valueFormat5(row) {
        let value = row.test_result;
        if (value == 0) {
          return "能力完好";
        } else if (value == 1) {
          return "轻度受损";
        } else if (value == 2) {
          return "中度受损";
        } else if (value >= 3) {
          return "重度受损";
        }
      },
      result(value) {},
      getTableData() {
        healthData().then((resp) => {
          if (resp.code === 200) {
            let elderData = [];
            for (let index = 0; index < resp.data.elder[0].length; index++) {
              const element = resp.data.elder[0][index];
              let temp = {};
              temp.name = Object.keys(element)[0] + "岁";
              temp.value = Object.values(element)[0];
              elderData.push(temp);
            }
            this.chart1.series[0].data = elderData;
            let healthTestData = [];
            for (
              let index = 0;
              index < resp.data.health_test[0].length;
              index++
            ) {
              const element = resp.data.health_test[0][index];
              healthTestData.push(Object.values(element)[0]);
            }
            this.chart2.series[0].data = healthTestData;
            let illData = [];
            let xAxisData1 = [];
            for (let index = 0; index < resp.data.ill[0].length; index++) {
              const element = resp.data.ill[0][index];
              xAxisData1.push(Object.keys(element)[0]);
              illData.push(Object.values(element)[0]);
            }
            this.chart3.series[0].data = illData;
            let tlData = [];
            let slData = [];
            for (
              let index = 0;
              index < resp.data.sl_level[0].length,
                index < resp.data.tl_level[0].length;
              index++
            ) {
              const element = resp.data.sl_level[0][index];
              const element1 = resp.data.tl_level[0][index];
              tlData.push(Object.values(element1)[0]);
              slData.push(Object.values(element)[0]);
            }
            this.chart4.series[0].data = tlData;
            this.chart4.series[1].data = slData;
            this.list = resp.data.elder_health;
          }
        });
      },
      handleCommand(command) {
        this.$message("click on item " + command);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    width: 100%;
    padding: 20px 30px !important;
    margin: 0 !important;
    box-sizing: border-box;
    background: #001e44 !important;
    .tableSort {
      background: none;
      ::v-deep {
        .tableCell {
          .cell {
            color: #fff;
          }
        }
        .tableRow {
          background: rgba($color: #fff, $alpha: 0);
          color: #fff;
          &:hover {
            td {
              background: rgba($color: #fff, $alpha: 0);
            }
          }
          .cell {
            color: #fff;
          }
        }
      }
    }
    .el-card {
      background: none;
      border-color: #00e4ff;
      background: rgba($color: #fff, $alpha: 0.1);

      ::v-deep {
        .el-card__header {
          border-bottom: 1px solid #00e4ff;
        }
      }

      .title {
        cursor: pointer;
        font-size: 18px;
        color: #fff;

        h3 {
          font-weight: normal;
        }
      }

      .el-dropdown-link {
        font-size: 16px;
        color: #fff;
      }
    }
  }
</style>
